<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <head>
        <meta charset="UTF-8">
        <title>菜价单</title>
        <style>
            /* 设置表格折叠边框，使边框看起来是单一线条 */
            table {
                border-collapse: collapse;
                /* 可根据需要调整表格宽度 */
                width: 200px;
                /* 单元格文字居中对齐 */
                text-align: center;
            }

            /* th和td元素的通用样式 */
            th,
            td {
                /* 单元格边框 */
                border: 1px solid #000;
                /* 单元格内边距 */
                padding: 5px;
            }

            /* 给包含colspan属性的表头单元格（表格标题行）添加背景色 */
            th[colspan] {
                background-color: #f0f0f0;
            }
        </style>
    </head>

<body>
    <table>
        <!-- 第一行：单行多列合并，用来显示整个表格的标题 -->
        <tr>
            <!-- colspan="3" 表示该单元格横跨3列 -->
            <th colspan="3">菜价单</th>
        </tr>
        <tr>
            <!-- rowspan="4" 表示该单元格纵向合并4行，用来在左侧一直显示“序号” -->
            <th rowspan="4">序号</th>
            <!-- 这里的两列为菜名与菜价的列标题 -->
            <th>菜名</th>
            <th>菜价</th>
        </tr>
        <!-- 以下3行是具体的菜品数据 -->
        <tr>
            <!-- 菜名：白菜 -->
            <td>白菜</td>
            <!-- 对应的价格：3￥ -->
            <td>3￥</td>
        </tr>
        <tr>
            <!-- 菜名：青菜 -->
            <td>青菜</td>
            <!-- 价格同上：3￥ -->
            <td>3￥</td>
        </tr>
        <tr>
            <!-- 菜名：芹菜 -->
            <td>芹菜</td>
            <!-- 价格：3￥ -->
            <td>3￥</td>
        </tr>
    </table>
</body>

</html>